<template>
	<view class="pageBg">
		<Head title=" " type="detail" :isBack="false"></Head>
		<view class="loginWrapper">
			<view class="loginTitle">你好，欢迎登录</view>
			<view class="btns">
				<!-- #ifdef MP-TOUTIAO -->
				<u-button v-if="!loginChecked" shape="circle" class="btn" :custom-style="weixinBtnStyle"
					@click="handleTips">
					<view v-if="douyin_miniprogram_examine==1">抖音账号登录</view>
					<view v-if="douyin_miniprogram_examine==0">抖音手机号授权快捷登录</view>
				</u-button>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<u-button v-if="!loginChecked" shape="circle" class="btn" :custom-style="weixinBtnStyle"
					@click="handleTips">
					手机号快捷登录
				</u-button>
				<!-- #endif -->
				<!-- #ifdef MP-ALIPAY -->
				<button v-if="!loginChecked" class="btn alipay_btn" @click="handleTips">
					支付宝账号快捷登录
				</button>
				<!-- #endif -->

				<!-- #ifdef MP-TOUTIAO-->
				<button class="userInfoBtn" v-show="loginChecked&&douyin_miniprogram_examine==1" open-type="getUserInfo"
					@click="getuserinfoTrill">抖音账号登录</button>
				<u-button v-show="loginChecked&&douyin_miniprogram_examine==0" shape="circle" class="btn"
					:custom-style="weixinBtnStyle" open-type="getPhoneNumber" @getphonenumber="getPhoneNumberTrill">
					抖音手机号授权快捷登录</u-button>
				<!-- #endif -->

				<!-- #ifdef MP-ALIPAY-->
				<button v-if="loginChecked" class="btn alipay_btn" open-type="getAuthorize" scope="phoneNumber"
					@getAuthorize="getPhoneNumberAlipay" onError="handleAuthError">支付宝账号快捷登录</button>
				<!-- #endif -->

				<!-- #ifdef MP-WEIXIN -->
				<u-button v-if="loginChecked" hover-class="none" open-type="getPhoneNumber"
					@getphonenumber="getPhoneNumberWx" class="btn" :hair-line="false" shape="circle"
					:custom-style="wxBtncustomStyle">手机号快捷登录</u-button>
				<!-- #endif -->
				<view class="btn mobile u-border" @click="handleJumpLogin">用户名登录</view>
			</view>
			<LoginAgree ref="LoginAgree" @handleChange="handleChange"></LoginAgree>
		</view>
		<!-- <Login :utype="utype" :redirect="redirect" :single_login="false" @afterLogin="redirectTo"></Login> -->
		<BottomNav></BottomNav>
		<SelectUserType ref="SelectUserType" :companyUser="company_user" :personalUser="personal_user"
			:type="selectType" @login="handleLogin"></SelectUserType>
		<TopTips ref="TopTips"></TopTips>
	</view>
</template>

<script>
	import Login from '@/components/Login'
	import LoginAgree from "@/components/LoginAgree.vue"
	import SelectUserType from "@/components/SelectUserType.vue"
	import http from '@/utils/http'
	import api from '@/api'
	export default {
		name: 'MemberLogin',
		components: {
			Login,
			LoginAgree,
			SelectUserType
		},
		data() {
			return {
				selectType: 'select',
				company_user: {},
				personal_user: {},
				redirect: '',
				utype: 2,
				checked: true,
				wxBtncustomStyle: {
					height: '96rpx',
					lineHeight: '96rpx',
					marginBottom: '34rpx',
					// border: 'none',
					color: '#FFFFFF',
					// boxShadow: '0px 5rpx 0px 0px rgba(11,64,255,0.3)',
					background: 'linear-gradient(45deg, #0B5BFF, #6195FF)',
					fontSize: "34rpx"
				},
				weixinBtnStyle: {
					background: 'linear-gradient(45deg, #0B5BFF, #6195FF)',
					color: '#FFFFFF',
					height: '96rpx',
					lineHeight: '96rpx',
					marginBottom: '34rpx',
					fontSize: "34rpx"
				},
				loginCode: '',
				loginChecked: false,
				params:{},
				douyin_miniprogram_examine: 1
			}
		},
		onLoad(query) {
			this.params = query
		},
		created() {
			this.douyin_miniprogram_examine = this.$store.state.config.douyin_miniprogram_examine
		},
		mounted() {
			this.redirect =
				this.params.redirect !== undefined ?
				this.params.redirect :
				''
			this.utype = this.params.utype_alias === 'company' ? 1 : 2
			let that = this
			uni.login({
				success(res) {
					that.loginCode = res.code
				}
			})
			setTimeout(() => {
				this.loginChecked = this.$refs.LoginAgree.checked
			}, 500)
		},
		watch: {
			'$Route.query': {
				immediate: true,
				handler(val) {
					this.utype = this.params.utype_alias === 'company' ? 1 : 2
				}
			}
		},
		methods: {
			handleTips() {
				if (!this.$refs.LoginAgree.checked) {
					this.$refs.TopTips.show({
						title: '请同意用户协议和隐私政策',
						type: 'error',
					})
					return false
				}
			},
			handleChange(val) {
				this.loginChecked = val
			},
			redirectTo() {
				if (this.redirect !== '') {
					uni.redirectTo({
						url: this.redirect
					});
				} else {
					if (this.utype === 1) {
						uni.redirectTo({
							url: '/company/CompanyIndex'
						});
					} else {
						uni.redirectTo({
							url: '/personal/PersonalIndex'
						});
					}
				}
			},
			handleLogin({
				utype
			}) {
				if (utype === 1) {
					uni.redirectTo({
						url: '/company/CompanyIndex'
					});
				} else {
					uni.redirectTo({
						url: '/personal/PersonalIndex'
					});
				}
			},
			handleJumpLogin() {
				uni.redirectTo({
					url: '/member/Login'
				})
			},
			// 获取用户手机号
			getPhoneNumberWx(e) {
				if (!this.$refs.LoginAgree.checked) {
					this.$refs.TopTips.show({
						title: '请同意用户协议和隐私政策',
						type: 'error'
					})
					return false
				}
				let code = e.detail.code
				if (code) {
					http.post(api.smallRoutineWechat, {
						code
					}).then(res => {
						if (res.data.code == 200) {
							var {
								code,
								company_user,
								personal_user
							} = res.data.data
							this.company_user = company_user
							this.personal_user = personal_user
							// code 1 注册  0未注册
							if (code == 1) {
								// 有账号
								if (company_user != null && personal_user != null) {
									// 查看是否是无效会员 
									if (company_user.is_perfect == 0 && personal_user.is_perfect == 0) {
										// 企业个人都是无效会员需要完善资料 展示弹窗用户选择企业或者个人
										this.selectType = 'select'
										this.$refs.SelectUserType.open()
									} else if (company_user.is_perfect == 1 && personal_user.is_perfect == 1) {
										this.selectType = 'select'
										this.$refs.SelectUserType.open()
									} else if (company_user.is_perfect) {
										// 企业有账号 直接进入系统
										this.$refs.SelectUserType.login(company_user)
									} else if (personal_user.is_perfect) {
										// 个人有账号 直接进入系统
										this.$refs.SelectUserType.login(personal_user)
									}
								} else if (company_user != null) {
									this.$refs.SelectUserType.login(company_user)
								} else if (personal_user != null) {
									this.$refs.SelectUserType.login(personal_user)
								}
							} else {
								// 无账号
								this.selectType = 'unregistered'
								this.$refs.SelectUserType.open()
							}
						}
					})
				} else {
					this.selectType = 'aborted'
					this.$refs.SelectUserType.open()
				}
			},
			// 支付宝账号登录
			getPhoneNumberAlipay() {
				my.getPhoneNumber({
					success: (res) => {
						console.log('同意获取手机号：', res)
						let encryptedData = res.response;
						// my.request({
						// 	//你的服务器地址
						// 	url: 'https://xxxxxxx',
						// 	data: encryptedData,
						// });
					},
					fail: (res) => {
						console.log('未同意获取手机号：', res)
					},
				});
			},
			handleAuthError(e) {
				console.log('error-alipay:', e)
			},
			// 抖音默认注册登录
			getuserinfoTrill() {
				let self = this
				uni.getUserProfile({
					provider: 'toutiao',
					success: function(infoRes) {
						uni.login({
							provider: 'toutiao',
							success: function(loginRes) {
								http.post(api.virtualAccountLogin, {
									code: loginRes.code
								}).then(response => {
									if (response.data.code == 200) {
										let personal_user = response.data.data
										self.$refs.SelectUserType.login(personal_user)
									}
								})
							}
						});
					},
					fail: function(res) {
						// console.log(res);
					}
				});
			},
			// 抖音登录
			getPhoneNumberTrill(e) {
				if (!this.$refs.LoginAgree.checked) {
					this.$refs.TopTips.show({
						title: '请同意用户协议和隐私政策',
						type: 'error'
					})
					return false
				}
				let encryptedData = e.detail.encryptedData
				let iv = e.detail.iv
				var that = this

				uni.login({
					success(res) {
						that.loginCode = res.code
						if (encryptedData && iv) {
							http.post(api.smallRoutineTrill, {
								iv: iv,
								code: that.loginCode,
								encryptedData: encryptedData
							}).then(res => {
								if (res.data.code == 200) {
									var {
										code,
										company_user,
										personal_user
									} = res.data.data
									that.company_user = company_user
									that.personal_user = personal_user
									// code 1 注册  0未注册
									if (code == 1) {
										uni.setStorageSync('loginChecked', false);
										// 有账号
										if (company_user != null && personal_user != null) {
											// 查看是否是无效会员 
											if (company_user.is_perfect == 0 && personal_user.is_perfect ==
												0) {
												// 企业个人都是无效会员需要完善资料 展示弹窗用户选择企业或者个人
												that.selectType = 'select'
												that.$refs.SelectUserType.open()
											} else if (company_user.is_perfect == 1 && personal_user
												.is_perfect == 1) {
												that.selectType = 'select'
												that.$refs.SelectUserType.open()
											} else if (company_user.is_perfect) {
												// 企业有账号 直接进入系统
												that.$refs.SelectUserType.login(company_user)
											} else if (personal_user.is_perfect) {
												// 个人有账号 直接进入系统
												that.$refs.SelectUserType.login(personal_user)
											}
										} else if (company_user != null) {
											that.$refs.SelectUserType.login(company_user)
										} else if (personal_user != null) {
											that.$refs.SelectUserType.login(personal_user)
										}
									} else {
										// 无账号
										that.selectType = 'unregistered'
										that.$refs.SelectUserType.open()
									}
								} else {
									console.log(11111)
								}
							}).catch(err => {
								uni.setStorageSync('loginChecked', false);
							})
						} else {
							that.selectType = 'aborted'
							that.$refs.SelectUserType.open()
						}
					}
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.loginWrapper {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -68%);
		// #ifdef MP-ALIPAY
		width: 90%;
		// #endif

		.loginTitle {
			text-align: center;
			color: #2A2A2A;
			font-size: 56rpx;
			// #ifdef MP-TOUTIAO || MP-WEIXIN
			margin-bottom: 132rpx;
			// #endif
			// #ifdef MP-ALIPAY
			margin-bottom: 60rpx;
			// #endif
			font-weight: bold;
		}

		.btns {
			.btn {
				width: 667rpx;
				height: 96rpx;
				text-align: center;
				line-height: 96rpx;
				font-size: 34rpx;
				border-radius: 48rpx;
				&.wx{
					button{
						font-size: 34rpx !important;
					}
					.u-size-default{
						font-size: 34rpx !important;
					}
				}
				&.alipay_btn_new {
					background: red;
				}

				&.mobile {
					color: #266DFF;
					margin-bottom: 46rpx;

					&::after {
						border-color: #266DFF;
						border-radius: 120rpx;
					}
				}

				&.alipay_btn {
					width: 100%;
					height: 100%;
					background: linear-gradient(45deg, #0B5BFF, #6195FF);
					color: #FFFFFF;
					height: 96rpx;
					line-height: 96rpx;
					font-size: 32rpx;
					margin: 60rpx 0 34rpx;
				}
			}
			.userInfoBtn {
				height: 96rpx;
				line-height: 96rpx;
				margin-bottom: 34rpx;
				border: none;
				color: #FFFFFF;
				// box-shadow: 0px 5rpx 0px 0px rgba(11, 64, 255, 0.3);
				background: linear-gradient(45deg, #0B5BFF, #6195FF);
				border-radius: 52rpx;
				font-size: 34rpx;
			
				&::after {
					display: none;
				}
			}
		}

		.bottom_agree {
			margin: 0 auto;
			text-align: center;
			font-size: 28rpx;
			color: #777777;
			width: fit-content;

			.agree_content {
				display: inline-block;
				text-align: center;

				.link {
					color: #266DFF;
				}
			}
		}
	}
</style>
